<template>
  <div class="person">
    <h2>{{ car }}</h2>
    <h2>{{ age }}</h2>
    <h2>{{ name }}</h2>
    <button @click="showClick">提交</button>
  </div>
</template>

<script>
export default {
  name: "Person",
  // 第一种方法
  props: ["car", "age",'name'],
  // 第二种方法
  // props: {
  //   name: String,
  //   age: Number,
  //   car: Object,
  // },
  // 第三种方法
  // props: {
  //   name: {
  //     type: String,
  //     default: "张三",
  //     require: false,
  //   },
  //   age: {
  //     type: Number,
  //     default: 118,
  //     require: false,
  //   },
  //   car: {
  //     type: Object,
  //     default() {
  //       return { barand: "宝马", price: "222222" };
  //     },
  //     require: false,
  //   },
  // },
  methods: {
    showClick() {
      console.log(this);
    },
  },
};
</script>

<style scoped>
.person {
  padding: 20px;
  background-image: linear-gradient(0deg, #cfd9df 0%, #e2ebf0 100%);
  border-radius: 20px;
}
</style>